<template>
    <a-page-header
        style="width: 100%;"
        :sub-title="subtitle && subtitle.length > 0 ? ['Hikari', ...subtitle].join(' / ') : ''"
        :title="title ? title : null"
    >
        <div slot="tags" style="margin-left: 50px; display: flex; flex-direction: row; align-items: center;">
            <template v-for="(v, k) in topMenu">
                <div v-if="v.type == 'label'" :key="k">{{v.title}}</div>

                <a-button v-if="v.type == 'button'" :key="k" :type="v.btnType ? v.btnType : ''" style="margin-right: 10px;" @click="v.method ? v.method() : ''">{{ v.title }}</a-button>

                <a-dropdown v-if="v.type == 'dropdown'" :key="k">
                    <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                        {{ v.title }} <a-icon type="down" />
                    </a>
                    <a-menu slot="overlay">
                        <a-menu-item v-for="(vv, kk) in v.children" :key="kk">
                            <a href="javascript:;" @click="vv.method ? vv.method() : ''">{{ vv.title }}</a>
                        </a-menu-item>
                    </a-menu>
                </a-dropdown>
            </template>
        </div>
        <template slot="extra">
            <a-dropdown>
                <a class="ant-dropdown-link">
                    {{ currentSite }} <a-icon type="down" />
                </a>
                <a-menu slot="overlay">
                    <a-menu-item v-for="(v, k) in sites" :key="k" :disabled="v.host == currentSiteHost">
                        <template v-if="v.host == currentSiteHost">
                            <div class="disable-menu-item">{{v.name}}（{{v.host}}）</div>
                        </template>
                        <template v-else>
                            <a
                                class="ant-dropdown-link"
                                @click="switchAdmin(v)"
                            >
                                {{v.name}}（{{v.host}}）
                            </a>
                        </template>
                    </a-menu-item>
                    <a-menu-divider></a-menu-divider>
                    <a-menu-item>
                        <a class="ant-dropdown-link" @click="gotoSiteManage()">
                            <a-icon type="global"/>
                            站点管理
                        </a>
                    </a-menu-item>
                    <a-menu-item>
                        <a class="ant-dropdown-link" @click="gotoBlog()">
                            <a-icon type="right-circle"/>
                            进入博客
                        </a>
                    </a-menu-item>
                    <a-menu-divider></a-menu-divider>
                    <a-menu-item>
                        <a class="ant-dropdown-link" @click="signout" style="color: red;">
                            <a-icon type="logout" />
                            退出登录
                        </a>
                    </a-menu-item>
                </a-menu>
            </a-dropdown>
        </template>
    </a-page-header>
</template>
<script>
import Vue from 'vue'
import {getSiteList} from '../../api/setting'
export default {
    name: 'Topbar',
    data() {return {
        title: '',
        subtitle: '',
        topMenu: [],
        sites: [],
        currentSite: '',
        currentSiteHost: ''
    }},
    mounted() {
        /**
         * 变更导航条文案机制：
         *
         * 点击一级菜单，title 设置为当前 title，subtitle 不设置
         * 点击二级菜单，title 设置为当前 title，subtitle 设置为 [v.title]
         * 点击二级以上菜单，title 设置为当前 title，subtitle 设置为 「除当前层级标题外，其余所有层级的标题数组」，例如：[vvv.title, vv.title]
         */
        Vue.prototype.$changeTitle = (v) => {
            this.title = v
        }
        Vue.prototype.$changeSubTitle = (v) => {
            this.subtitle = v
        }

        /**
         * 变更顶部操作菜单
         * 支持的使用方式：
         *
         * type == button       按钮
         *      title:      string      标题
         *      method:     Function    要执行的操作
         *
         * type == dropdown     下拉菜单
         *      title:      string      标题
         *      children:   array       菜单项
         *      children.title:     string      菜单项标题
         *      children.method     Function    执行的动作
         */
        Vue.prototype.$changeTopMenu = (v) => {
            this.topMenu = v
        }

        this.getSiteList()
        Vue.prototype.$getSiteList = this.getSiteList

        // console.log(this.$route)
    },
    methods: {
        getSiteList() {
            getSiteList({}).then(res => {
                this.sites = res.data.map(v => {
                    v.host = v.hosts.join(',')
                    return v
                })
                let currentSite = {}
                for (let i = 0; i < this.sites.length; i ++) {
                    const v = this.sites[i]
                    if (v.hosts.includes(window.location.host)) {
                        currentSite = {
                            name: v.name,
                            host: window.location.host
                        }
                        break
                    }
                }
                if (currentSite) {
                    this.currentSite = `${currentSite.name}（${currentSite.host}）`
                    this.currentSiteHost = currentSite.host
                } else {
                    this.currentSite = `${window.location.hostname}（站点未配置）`
                    this.currentSiteHost = window.location.hostname
                }
            })
        },
        gotoSiteManage() {
            if (this.$route.path != '/setting/site') this.$router.push('/setting/site')
        },
        switchAdmin(v) {
            window.location.href = `//${v.hosts.length > 0 ? v.hosts[0] : v.host}/admin#/dashboard?token=${localStorage.getItem('access_token')}`
        },
        gotoBlog() {
            window.open('/')
        },
        signout() {
            window.localStorage.setItem('access_token', '')
            this.$router.push('/login')
        }
    }
}
</script>
<style lang="scss" scoped>
.disable-menu-item {
    cursor: not-allowed;
}
</style>

